<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>无人点单、无人支付系统</title>
   <link rel="stylesheet" type="text/css" href="css/basic.css"/>
   <link rel="stylesheet" type="text/css" href="css/index.css"/>
   <script type="text/javascript">
   	window.onload= function(){
   		var navBtn = document.getElementById('nav_menu');
   		var leftmenu = document.getElementById('left_list_menu');
   		var bg= document.getElementById('bg');
   		var flag = true;
   		bg.onclick = navBtn.onclick = function(){
   			if(flag){
   				flag = false;
   				leftmenu.style.transform ='translate(0,0)';
   				bg.style.display='block';
   			}else{
   				flag = true;
   				leftmenu.style.transform='translate(-100%,0)';
   				bg.style.display ='none';
   				
   			}
   		}
   		
   		
   	}
   	
   	
   </script>
</head>
<body>
	<header class="index_header">
		<div class="hlist">
			<img src="img/rexiao.png" alt="" />
			<p>热销榜</p>
		</div>
		<div class="hlist">
			<img src="img/caidan.png" alt="" />
			<p>点过的菜</p>
		</div>
		<div class="hlist">
			<img src="img/sousuo.png" alt="" />
			<p>搜你喜欢</p>
		</div>
	</header>
	
	<aside class="left_list_menu" id="left_list_menu">
		<ul>
			<li>精品美食</li>
			<li>精品小面</li>
			<li>饮料酒水</li>
			<li>新品推荐</li>
			<li>舌尖美食</li>
			<li>厨师推荐</li>
		</ul>
		<div class="nav_menu" id="nav_menu">
			<img src="img/nav.png" alt="" />
			<p>菜单</p>
		</div>
	</aside>
	
	
	<div class="content">
		<div class="item_header">
			<h3 class="item_header_name">皮蛋瘦肉粥</h3>
			<ul class="item_list">
				<li>
					<div class="inner">
						<img src="img/1.jpg" alt="" />
						<p class="item_title">大蒜腊肉</p>
						<p class="item_price">¥26</p>
					</div>
				</li>
				<li>
					<div class="inner">
						<img src="img/2.jpg" alt="" />
						<p class="item_title">家乡扣肉</p>
						<p class="item_price">¥21</p>
					</div>
				</li>
				<li>
					<div class="inner">
						<img src="img/3.jpg" alt="" />
						<p class="item_title">主打鸡</p>
						<p class="item_price">¥37</p>
					</div>
				</li>
				<li>
					<div class="inner">
						<img src="img/4.jpg" alt="" />
						<p class="item_title">酸辣土豆丝</p>
						<p class="item_price">¥26</p>
					</div>
				</li>
				<li>
					<div class="inner">
						<img src="img/5.jpg" alt="" />
						<p class="item_title">主打鸡</p>
						<p class="item_price">¥29</p>
					</div>
				</li>
				<li>
					<div class="inner">
						<img src="img/6.jpg" alt="" />
						<p class="item_title">家乡腊肉</p>
						<p class="item_price">¥26</p>
					</div>
				</li>
				<li>
					<div class="inner">
						<img src="img/7.jpg" alt="" />
						<p class="item_title">长沙臭豆腐</p>
						<p class="item_price">¥23</p>
					</div>
				</li>
			</ul>
		</div>     <!--item_header-->
		<div class="item_header">
			<h3 class="item_header_name">皮蛋瘦肉粥</h3>
			<ul class="item_list">
				<li>
					<div class="inner">
						<img src="img/1.jpg" alt="" />
						<p class="item_title">大蒜腊肉</p>
						<p class="item_price">¥26</p>
					</div>
				</li>
				<li>
					<div class="inner">
						<img src="img/2.jpg" alt="" />
						<p class="item_title">家乡扣肉</p>
						<p class="item_price">¥21</p>
					</div>
				</li>
				<li>
					<div class="inner">
						<img src="img/3.jpg" alt="" />
						<p class="item_title">主打鸡</p>
						<p class="item_price">¥37</p>
					</div>
				</li>
				<li>
					<div class="inner">
						<img src="img/4.jpg" alt="" />
						<p class="item_title">酸辣土豆丝</p>
						<p class="item_price">¥26</p>
					</div>
				</li>
				<li>
					<div class="inner">
						<img src="img/5.jpg" alt="" />
						<p class="item_title">主打鸡</p>
						<p class="item_price">¥29</p>
					</div>
				</li>
				<li>
					<div class="inner">
						<img src="img/6.jpg" alt="" />
						<p class="item_title">家乡腊肉</p>
						<p class="item_price">¥26</p>
					</div>
				</li>
				<li>
					<div class="inner">
						<img src="img/7.jpg" alt="" />
						<p class="item_title">长沙臭豆腐</p>
						<p class="item_price">¥23</p>
					</div>
				</li>
			</ul>
		</div>     <!--item_header-->
	</div>
	<div class="bg" id="bg"></div> <!--侧边背景-->
	
	<div class="footer_nav" id="footer_nav">
		<img src="img/navigation.png" alt="" />
		<p>导航</p>
	</div>
	
	<div class="footer_nav_show">
		<ul class="nav_list">
			<li>
				<img src="img/menu.png" alt="" />
				<p>菜单</p>
			</li>
			<li>
				<img src="img/cart.png" alt="" />
				<p>购物车</p>
			</li>
			<li>
				<img src="img/order.png" alt="" />
				<p>我的订单</p>
			</li>
			<li>
				<img src="img/wallet.png" alt="" />
				<p>结账</p>
			</li>
			<li>
				<img src="img/close.png" alt="" />
				<p>返回</p>
			</li>
		</ul>
	</div>
	
	<div class="footer_cart">
		<img src="img/cart.png" alt="" />
		<p>购物车</p>
	</div>
	
		
</body>
</html>